<template>
	<view class="pop">
		<u-popup :show="pop" :round="10" mode="center" @close="loginClose" @open="loginOpen">
			<view class="up-box">
				<!-- <view class="box-top">
					<u-icon name="close-circle" size="32"></u-icon>
				</view> -->
				<view class="box-logo">
					<image src="/static/logo.png" mode=""></image>
				</view>
				<button class="box-btn" @click="login">授权登录</button>
				<view class="no-login" @click="closeLoginPop">暂不授权</view>
			</view>
		</u-popup>
		<u-popup :show="mobilePop" :round="10" mode="center" @close="mobileClose" @open="mobileOpen">
			<view class="up-box">
				<!-- <view class="box-top">
					<u-icon name="close-circle" size="32"></u-icon>
				</view> -->
				<view class="box-logo">
					<image src="/static/logo.png" mode=""></image>
				</view>
				<button class="box-btn" style="background: linear-gradient(135deg, #999 0%, #999 100%);"
					v-if="!isAccept" @click="isClick">
					获取手机号
				</button>
				<button class="box-btn" open-type="getPhoneNumber" v-else @getphonenumber="getPhoneNumber"
					@click="getCode">
					获取手机号
				</button>
				<view class="box-agr" @tap="isAccept=!isAccept">
					<image :src="isAccept?'/static/icon/yes.png':'/static/icon/no.png'" mode=""></image>请阅读并同意
					<text @tap.stop="go()">《隐私协议》</text>
				</view>
				<view class="no-login" @click="closeMobilePop">暂不获取</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		wxAuthApi,
		wxAuthMobileApi,
	} from '@/api/apis/comm.js'
	export default {
		name: "login-pop",
		data() {
			return {
				isAccept: false,
				// phoneShow: false,
				// openid: '',
				// session_key: "",
				// userinfo: {}
				// uid: 0,

				zeroCode: '',
			};
		},
		computed: {
			computedpop() {
				return this.$store.state.pop;
			},
		},
		created() {
			// #ifdef MP
			this.getCode();
			// #endif
		},
		methods: {
			go() {
				uni.navigateTo({
					url: '/pages/users/agreement/agreement?type=2'
				});
			},
			loginOpen() {
				// console.log('open');
			},
			loginClose() {
				this.$u.vuex('pop', false);
			},
			//登录关闭弹窗
			closeLoginPop() {
				this.$u.vuex('pop', false);
			},
			mobileOpen() {
				// console.log('open');
			},
			mobileClose() {
				this.$u.vuex('mobilePop', false);
			},
			closeMobilePop() {
				this.$u.vuex('mobilePop', false);
			},

			isClick() {
				let _this = this;
				if (!this.isAccept) {
					_this.$u.toast('请阅读并同意《用户协议》!');
					return;
				}
			},


			getCode() {
				let _this = this;
				uni.login({
					provider: 'weixin',
					success(a) {
						_this.zeroCode = a.code;
					}
				})
			},


			//绑定手机
			async getPhoneNumber(e) {
				console.log(e);
				let wxCode = '';
				let _this = this;
				if (!this.isAccept) {
					_this.$u.toast('请阅读并同意《用户协议》!');
					return;
				}
				uni.showLoading({
					title: '登录中',
					mask: true
				});

				if (e.detail.errMsg == "getPhoneNumber:ok") {
					//手机授权
					wxAuthMobileApi({
						code: _this.zeroCode,
						iv: e.detail.iv,
						encryptedData: e.detail.encryptedData,
					}).then(res => {
						uni.hideLoading();
						console.log(res, '+++手机')
						if (res.code == 1) {
							_this.$u.vuex('isMobile', true);
							_this.$u.vuex('user_token', res.data.token);
							_this.$u.vuex('user_info', res.data);
							uni.setStorageSync('lifeData', {
								'user_token': res.data.token,
								'user_info': res.data,
								'isMobile': true
							}, 2592000);
							_this.closeMobilePop();
							let myProfile = uni.getStorageSync('myProfile')
							if (myProfile === true) {
								uni.setStorageSync('myProfile', false);
								uni.navigateTo({
									url: '/pages/users/my-profile/my-profile'
								})
							}
						}
					})

					// setTimeout(() => {
					//默认登录


					// }, 1500)


				} else {
					uni.hideLoading();
					let myProfile = uni.getStorageSync('myProfile')
					if (myProfile === true) {
						uni.setStorageSync('myProfile', false);
					}
					_this.closeMobilePop();
				}


			}



		}
	}
</script>

<style lang="scss">
	.pop {
		.up-box {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 516rpx;
			padding: 30rpx;
			box-sizing: border-box;

			.box-top {
				display: flex;
				justify-content: flex-end;
				width: 100%;
			}

			.box-logo {
				image {
					width: 180rpx;
					height: 180rpx;
				}
			}

			.box-btn {
				width: 220rpx;
				height: 58rpx;
				background: linear-gradient(135deg, #F7583F 0%, #F28F4C 100%);
				border-radius: 44rpx;
				line-height: 56rpx;
				text-align: center;
				font-size: $main-font-28;
				color: $main-font-color-white;
				margin-top: 50rpx;
			}

			.box-agr {
				margin-top: 24rpx;
				display: flex;
				align-items: center;

				image {
					width: 20rpx;
					height: 20rpx;
					margin-right: 6rpx;
				}

				font-size: $main-font-20;
				color: #333;

				text {
					color: #F28F4C;
				}
			}

			.no-login {
				margin-top: 24rpx;
				color: #666;
				font-size: $main-font-28;
			}
		}

	}
</style>